<template>
    <div class="bg searchMg" @click.stop="">
        <p class="title"style="font-size:16px">查询信息</p>
        <div class="item">
            <label>指定区域：</label>
            <el-select v-model="area" class="select-input" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="item">
            <label for="cp">车牌号：</label>
            <input type="text" v-model="car" id="cp">
        </div>
        <div style="clear: both"></div>

        <div class="item">
            <label for="qy">企业名称：</label>
            <input type="text" v-model="name" id="qy">
        </div>
        <div style="clear: both"></div>

        <div class="item">
            <label for="ys">运输单号：</label>
            <input type="text" v-model="number" id="ys">
        </div>
        <div style="clear: both"></div>
        <div class="item">
            <label>货物类型：</label>
            <el-select v-model="area" class="select-input" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="item">
            <label>车辆状态：</label>
            <el-select v-model="area" class="select-input" placeholder="请选择">
                <el-option
                        v-for="item in status"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
      <div style="width: 290px;margin: 20px auto">
          <button @click="search"style="float: left">确定</button>
          <button @click="search"style="float: right;">取消</button>
      </div>
    </div>
</template>

<script>
    import bus from '@/eventBus/bus'

    export default {
        name: "searchMg",
        data() {
            return {
                status:[
                    {
                        value: '状态1',
                        label: '状态1'
                    },
                    {
                        value: '状态2',
                        label: '状态2'
                    },
                    {
                        value: '状态3',
                        label: '状态3'
                    }
                ],
                options: [{
                    value: '北京',
                    label: '北京'
                }, {
                    value: '天津',
                    label: '天津'
                }, {
                    value: '上海',
                    label: '上海'
                }, {
                    value: '深圳',
                    label: '深圳'
                }, {
                    value: '武汉',
                    label: '武汉'
                }],
                area: '',
                ctype: '',
                name: '',
                htype: '',
                car: '',
                number: ''
            }
        },
        methods: {
            search() {
                let form = [
                    {
                        text: '指定区域',
                        value: this.area
                    },
                    {
                        text: '车牌号',
                        value: this.car
                    },
                    {
                        text: '企业名称',
                        value: this.name
                    },
                    {
                        text: '运输单号',
                        value: this.number
                    },
                    {
                        text: '货物类型',
                        value: this.htype
                    },
                    {
                        text: '车辆状态',
                        value: this.ctype
                    },
                ]
                bus.$emit('search', form)
                let obj = {
                    status: false,
                    type: 'inquire'
                }
                bus.$emit('dialogshow', obj)
            }
        }
    }
</script>
<style>
    .searchMg .el-input__inner {
        background-color: rgba(225, 225, 225, 0);
        border: none;
        padding: 0;
        height: 40px;
    }

    .searchMg .el-input__suffix {
        margin-right: 10px;
    }

    .searchMg .el-select-dropdown, .el-popper {
        min-width: 400px !important;
    }

    .el-select-dropdown__list {
        background: #091737 !important;
        border: none;
    }
    .el-popper[x-placement^=bottom] .popper__arrow::after{
        border-bottom-color: #091737 !important;
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
        background: #223561;
        color: #fff;
    }
    .el-select-dropdown{
        border-color:#1D55AA ;
    }
    .el-select-dropdown__item.selected {

    }
    .el-select .el-input .el-select__caret{
        color: #1D55AA;
    }
</style>
<style scoped>
    .bg {
        width: 611px;
        height: 501px;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        /*overflow: hidden;*/
        background: url("./img/text_bg.png") no-repeat center;
    }

    .title {
        width: 90%;
        height: 35px;
        line-height: 35px;
        color: #6284a9;
        font-family: '微软雅黑', 'Avenir', Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: .8em;
        letter-spacing: 0.5px;
        text-align: left;
        margin: 0 0 0 15px;
    }

    /*form{*/
    /*color: #6284a9;*/
    /*}*/
    .fl {
        display: inline-block;
        width: 74px;
        height: 41px;
        line-height: 41px;
        font-family: '微软雅黑', 'Avenir', Helvetica, Arial, sans-serif;
        text-align: left;
        font-size: .8em;
        letter-spacing: 1px;
        margin: 24px 0 0 61px;
        color: #6284a9;
    }

    label {
        display: inline-block;
        text-align: right;
        width: 100px;
        height: 41px;
        line-height: 41px;
        font-family: '微软雅黑', 'Avenir', Helvetica, Arial, sans-serif;
        font-size: .8em;
        letter-spacing: 3px;
        margin: 0 0 0 30px;
        color: #6284a9;
    }

    .item {
        margin-top: 20px

    }

    .select-input {
        width: 403px;
        height: 41px;
        border: 0;
        background: #090816 url("./img/text.png") no-repeat center;
        color: #6284a9;
        padding-left: 15px;
        outline: none;
    }

    .i-bg {
        display: inline-block;
        width: 425px;
        height: 41px;
        position: relative;
    }

    input {
        width: 403px;
        height: 41px;
        border: 0;
        background: url("./img/text.png") no-repeat center;
        color: #6284a9;
        padding-left: 15px;
        outline: none;
    }

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #506071;
    }

    input:-moz-placeholder, textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #506071;
    }

    input::-moz-placeholder, textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #506071;
    }

    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #506071;
    }

    .i-bg i {
        display: inline-block;
        width: 8px;
        height: 6px;
        position: absolute;
        top: 14px;
        right: 20px;
        cursor: pointer;
    }

    .one label {
        letter-spacing: 3px;
        margin: 37px 0 0 73px;
    }

    .one input {
        padding-left: 15px;
    }

    button {
        display: inline-block;
        width: 136px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        font-family: '微软雅黑', 'Avenir', Helvetica, Arial, sans-serif;
        border: 0px;
        background: url("../../../static/img/determine.png") no-repeat center;
        color: #009fff;
        cursor: pointer;
    }
</style>
